<template>
  <div class="BasicSettings-wrapper">
    <el-card class="box-card">
      <div slot="header">
        <span>设置</span>
      </div>

      <el-radio-group v-model="formData.type" @change="handleChange">
        <el-radio-button :label="1">早出晚归</el-radio-button>
        <el-radio-button :label="2">未归</el-radio-button>
      </el-radio-group>

      <div class="BasicSettings-box">
        <div>正常通行时间</div>
        <div v-if="formData.type == 1">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="auto">
            <el-form-item label="周一" prop="date1">
              <el-time-picker
                is-range
                v-model="ruleForm.date1"
                format="HH:mm"
                value-format="HH:mm"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
              ></el-time-picker>
            </el-form-item>
            <el-form-item label="周二" prop="date2">
              <el-time-picker
                is-range
                v-model="ruleForm.date2"
                format="HH:mm"
                value-format="HH:mm"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
              ></el-time-picker>
            </el-form-item>
            <el-form-item label="周三" prop="date3">
              <el-time-picker
                is-range
                v-model="ruleForm.date3"
                format="HH:mm"
                value-format="HH:mm"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
              ></el-time-picker>
            </el-form-item>
            <el-form-item label="周四" prop="date4">
              <el-time-picker
                is-range
                v-model="ruleForm.date4"
                format="HH:mm"
                value-format="HH:mm"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
              ></el-time-picker>
            </el-form-item>
            <el-form-item label="周五" prop="date5">
              <el-time-picker
                is-range
                v-model="ruleForm.date5"
                format="HH:mm"
                value-format="HH:mm"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
              ></el-time-picker>
            </el-form-item>
            <el-form-item label="周六" prop="date6">
              <el-time-picker
                is-range
                v-model="ruleForm.date6"
                format="HH:mm"
                value-format="HH:mm"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
              ></el-time-picker>
            </el-form-item>
            <el-form-item label="周天" prop="date7">
              <el-time-picker
                is-range
                v-model="ruleForm.date7"
                format="HH:mm"
                value-format="HH:mm"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
              ></el-time-picker>
            </el-form-item>
            <!-- <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item> -->
          </el-form>
        </div>
        <div v-if="formData.type == 2">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="auto">
            <el-form-item label="周一" prop="date11">
              <el-time-select v-model="ruleForm.date11" placeholder="选择时间"></el-time-select>
            </el-form-item>
            <el-form-item label="周二" prop="date22">
              <el-time-select v-model="ruleForm.date22" placeholder="选择时间"></el-time-select>
            </el-form-item>
            <el-form-item label="周三" prop="date33">
              <el-time-select v-model="ruleForm.date33" placeholder="选择时间"></el-time-select>
            </el-form-item>
            <el-form-item label="周四" prop="date44">
              <el-time-select v-model="ruleForm.date44" placeholder="选择时间"></el-time-select>
            </el-form-item>

            <el-form-item label="周五" prop="date55">
              <el-time-select v-model="ruleForm.date55" placeholder="选择时间"></el-time-select>
            </el-form-item>
            <el-form-item label="周六" prop="date66">
              <el-time-select v-model="ruleForm.date66" placeholder="选择时间"></el-time-select>
            </el-form-item>
            <el-form-item label="周天" prop="date77">
              <el-time-select v-model="ruleForm.date77" placeholder="选择时间"></el-time-select>
            </el-form-item>
          </el-form>
        </div>

        <div class="button-group">
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ruleconfig, rulequery } from '@/api/comment/permission';

export default {
  data() {
    return {
      rules: {
        // 早出晚归模式校验规则
        date1: [{ type: 'array', required: true, message: '请选择周一时间', trigger: 'change' }],
        date2: [{ type: 'array', required: true, message: '请选择周二时间', trigger: 'change' }],
        date3: [{ type: 'array', required: true, message: '请选择周三时间', trigger: 'change' }],
        date4: [{ type: 'array', required: true, message: '请选择周四时间', trigger: 'change' }],
        date5: [{ type: 'array', required: true, message: '请选择周五时间', trigger: 'change' }],
        date6: [{ type: 'array', required: true, message: '请选择周六时间', trigger: 'change' }],
        date7: [{ type: 'array', required: true, message: '请选择周天时间', trigger: 'change' }],
        // 未归模式校验规则
        date11: [{ type: 'string', required: true, message: '请选择周一时间', trigger: 'change' }],
        date22: [{ type: 'string', required: true, message: '请选择周二时间', trigger: 'change' }],
        date33: [{ type: 'string', required: true, message: '请选择周三时间', trigger: 'change' }],
        date44: [{ type: 'string', required: true, message: '请选择周四时间', trigger: 'change' }],
        date55: [{ type: 'string', required: true, message: '请选择周五时间', trigger: 'change' }],
        date66: [{ type: 'string', required: true, message: '请选择周六时间', trigger: 'change' }],
        date77: [{ type: 'string', required: true, message: '请选择周天时间', trigger: 'change' }]
      },
      ruleForm: {},
      formData: {
        type: 1, // type  int类型1表示配置早出晚归  2表示配置未归
        times: []
      }
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getrulequery();
  },
  methods: {
    handleChange(value) {
      //   console.log('选择的类型:', value);
      this.formData.type = value;

      this.getrulequery();
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //   alert('submit!');

          console.log(this.ruleForm);

          if (this.formData.type == 1) {
            this.formData.times = [
              {
                day: 1,
                startTime: this.ruleForm.date1[0],
                endTime: this.ruleForm.date1[1]
              },
              {
                day: 2,
                startTime: this.ruleForm.date2[0],
                endTime: this.ruleForm.date2[1]
              },
              {
                day: 3,
                startTime: this.ruleForm.date3[0],
                endTime: this.ruleForm.date3[1]
              },
              {
                day: 4,
                startTime: this.ruleForm.date4[0],
                endTime: this.ruleForm.date4[1]
              },
              {
                day: 5,
                startTime: this.ruleForm.date5[0],
                endTime: this.ruleForm.date5[1]
              },
              {
                day: 6,
                startTime: this.ruleForm.date6[0],
                endTime: this.ruleForm.date6[1]
              },
              {
                day: 7,
                startTime: this.ruleForm.date7[0],
                endTime: this.ruleForm.date7[1]
              }
            ];
          }

          if (this.formData.type == 2) {
            this.formData.times = [
              {
                day: 1,
                startTime: this.ruleForm.date11
              },
              {
                day: 2,
                startTime: this.ruleForm.date22
              },
              {
                day: 3,
                startTime: this.ruleForm.date33
              },
              {
                day: 4,
                startTime: this.ruleForm.date44
              },
              {
                day: 5,
                startTime: this.ruleForm.date55
              },
              {
                day: 6,
                startTime: this.ruleForm.date66
              },
              {
                day: 7,
                startTime: this.ruleForm.date77
              }
            ];
          }

          ruleconfig(this.formData).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: '配置成功',
                type: 'success'
              });
            } else {
              this.$message({
                message: res.msg || '配置失败',
                type: 'error'
              });
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    // 查询规则
    async getrulequery() {
      let res = await rulequery({
        type: this.formData.type
      });

      console.log(res);

      if (res.code == 0) {
        if (this.formData.type == 1) {
          res.data.times.forEach((item) => {
            this.$set(this.ruleForm, `date${item.day}`, [item.startTime, item.endTime]);
          });
        }

        if (this.formData.type == 2) {
          res.data.times.forEach((item) => {
            this.$set(this.ruleForm, `date${item.day}${item.day}`, item.startTime);
          });
        }
      }
    }
  },

  components: {}
};
</script>

<style lang="scss" scoped>
// 主容器样式

.BasicSettings-wrapper {
  //   margin: 20px;
  padding: 10px;
  //   background-color: #f5f7fa;
}

// 卡片样式优化
.box-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  background-color: #fff;
}

.box-card:hover {
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
}

// 卡片标题样式
.el-card__header {
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}

.el-card__header .clearfix {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

// 单选按钮组样式
.el-radio-group {
  margin: 20px 20px 0;
  display: flex;
  padding-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
}

.el-radio-button {
  margin-right: 0;
  border-radius: 0;
}

.el-radio-button:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.el-radio-button:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.el-radio-button__inner {
  padding: 8px 20px;
  font-size: 14px;
  transition: all 0.3s ease;
}

// 基础设置盒子样式
.BasicSettings-box {
  padding: 20px;
  height: 59vh;
}

.BasicSettings-box > div:first-child {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 16px;
  padding-bottom: 10px;
}

// 表单样式优化
.el-form {
  width: 100%;
}

.el-form-item {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.el-form-item__label {
  min-width: 80px;
  text-align: right;
  font-weight: 500;
  color: #606266;
  padding-right: 15px;
}

.el-form-item__content {
  flex: 1;
}

// 时间选择器样式
.el-time-picker,
.el-time-select {
  width: 100%;
  max-width: 300px;
}

.el-time-picker__input,
.el-time-select__input {
  border-radius: 4px;
  transition: border-color 0.3s ease;
}

.el-time-picker__input:hover,
.el-time-select__input:hover {
  border-color: #c0c4cc;
}

.el-time-picker__input:focus,
.el-time-select__input:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

// 按钮样式优化
.button-group {
  display: flex;
  //   justify-content: center;
  margin-top: 30px;
  gap: 15px;
}

.el-button {
  padding: 10px 24px;
  font-size: 14px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.el-button:active {
  transform: translateY(0);
}

.el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
}

.el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

// 响应式设计
@media (max-width: 768px) {
  .BasicSettings-wrapper {
    margin: 10px;
    padding: 10px;
  }

  .el-form-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .el-form-item__label {
    text-align: left;
    margin-bottom: 8px;
    padding-right: 0;
  }

  .el-time-picker,
  .el-time-select {
    width: 100%;
    max-width: none;
  }
}
</style>
